<script setup lang="ts">
import {onMounted, ref} from "vue";

const props = defineProps<{
  records: Record<string, any>,
  title: string,
  visible: boolean,
}>()
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void
}>();
const currentKey = ref<string>();
const isVisible = ref<boolean>(false);
onMounted(() => {
  isVisible.value = props.visible;
})
const close = () => {
  emit("update:visible", false);
}
</script>

<template>
  <div>
    <el-dialog v-model="isVisible" @close="close" top="5%" width="40%" append-to-body>
      <template #header>
        <div class="json-view-header">
          <span>{{title}}</span>
          <slot name="operation"></slot>
        </div>
      </template>
      <div style="max-height: 500px;">
         <template v-for="(value,key) in records">
           <div class="line" @click="currentKey=key" :style="{backgroundColor:currentKey===key?'#EEF5FE':''}">
             <div>{{ key }}</div>
             <div>{{ value }}</div>
           </div>
         </template>
      </div>
      <template #footer>
        <el-button   @click="close">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.json-view-header{
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  justify-items: center;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px var(--el-border-color)
}
</style>